<template lang="">
    
    <div>
        <el-dialog witdh="90%" title="报告详情" :close-on-click-modal="false" :visible="showDialog" @close="clickClose">
            <div class="report">
                <p>[前置自定义方法]</p>
                <div class="com" v-for="(item, index) in comrep" :key="'com-'+index">
                    <span>{{ item.value }}</span>
                </div>
                <br />
                <p>[数据操作]</p>
                <div class="sql"  v-for="(item, index) in sqlrep" :key="'sql-'+index">
                    <span>{{ item.value }}</span>
                </div>
                <div v-if="reportlsit['datarep']">
                    <br />
                    <p>[用例详情]</p>
                    <span>[用例标题]：</span><br />
                    <span>{{ reportlsit['datarep'][0].name}}</span><br />
                    <span>[测试API]：</span><br />
                    <span>{{ reportlsit['datarep'][0].api}}</span><br />
                    <span>[请求URL]：</span><br />
                    <span>{{ reportlsit['datarep'][0].url}}</span><br />
                    <span>[请求方式]：</span><br />
                    <span>{{ reportlsit['datarep'][0].apimethod}}</span><br />
                    <span>[请求Headers]：</span><br />
                    <div class="header"  v-for="(item, index) in headers" :key="'header-'+index">
                        <span>{{ item.value}} </span>
                    </div>
                    <span>[请求数据]：</span><br />
                    <span>{{ reportlsit['datarep'][0].body}}</span><br />
                </div>
                <br />

                <p>[响应时间]</p>
                <div v-if="reportlsit['elapsedt']">
                    <span>{{ reportlsit['elapsedt'] }} ms</span><br />
                </div>
                <br />

                <p>[测试结果]</p>
                <div class="case" v-for="(item, index) in caserep" :key="'case-'+index">
                    <span>{{ item.value }}</span>
                </div>
                <br />
                <p>[参数化]</p>
                <div  class="par" v-for="(item, index) in parrep" :key="'par-'+index">
                    <span>{{ item.value }}</span>
                </div>
                <br />
                <p>[后置自动义方法]</p>
                <div class="res" v-for="(item, index) in resrep" :key="'res-'+index">
                    <span>{{ item.value }}</span>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import { getReportDetail } from "@/network/networks"
    export default {
        data() {
            return {
                rowid: 0,
                showDialog: false,
                reportlsit: {},
                comrep: [],
                sqlrep: [],
                parrep: [],
                resrep: [],
                caserep: [],
                headers: [],
            }
        },


        methods: {
            clickClose() {
                this.showDialog = false;
                this.rowid = -1
            },

            getReport() {
                if (this.rowid == -1) {
                    this.comrep= [];
                    this.sqlrep= [];
                    this.parrep= [];
                    this.resrep= [];
                    this.caserep= [];
                    this.headers= [];
                    return;
                }
                getReportDetail({
                    rowid: this.rowid
                })
                    .then(res => {
                        if (res.code == 1) {

                            this.reportlsit = res.data;
                            this.getcomrep();
                            this.getsqlrep();
                            this.getparrep();
                            this.getresrep();
                            this.getcaserep();
                            this.getheaders();
                        }
                        else {
                            this.$message.error(res.msg);
                        }
                    })
                    .catch(err => {
                        this.$message.error(err)
                    })
            },


            getcomrep() {
                for (var i = 0; i < this.reportlsit['comrep'].length; i++) {
                    this.comrep.push({
                        value: this.reportlsit['comrep'][i],
                        key: i
                    })
                }
                if (this.comrep.length == 0) {
                    this.comrep.push({
                        value: "用例无前置自定义",
                        key: Date.now()
                    })
                }
            },


            getsqlrep() {
                for (var i = 0; i < this.reportlsit['sqlrep'].length; i++) {
                    this.sqlrep.push({
                        value: this.reportlsit['sqlrep'][i],
                        key: i
                    })
                }
                if (this.sqlrep.length == 0) {
                    this.sqlrep.push({
                        value: "用例无数据库操作",
                        key: Date.now()
                    })
                }
            },


            getparrep() {
                for (var i = 0; i < this.reportlsit['parrep'].length; i++) {
                    this.parrep.push({
                        value: this.reportlsit['parrep'][i],
                        key: i
                    })
                }
                if (this.parrep.length == 0) {
                    this.parrep.push({
                        value: "用例无参数化",
                        key: Date.now()
                    })
                }
            },


            getresrep() {
                for (var i = 0; i < this.reportlsit['resrep'].length; i++) {
                    this.resrep.push({
                        value: this.reportlsit['resrep'][i],
                        key: i
                    })
                }
                if (this.resrep.length == 0) {
                    this.resrep.push({
                        value: "用例无后置自定义方法",
                        key: Date.now()
                    })
                }
            },

            getcaserep() {
                var rep = this.reportlsit['caserpe'][0].split("\n")
                for (var i = 0; i < rep.length; i++) {
                    this.caserep.push({
                        value: rep[i],
                        key: i
                    })
                }
            },

            getheaders(){
                var heads = this.reportlsit['datarep'][0].headers.split("\n")
                for(var i = 0; i < heads.length; i++){
                    this.headers.push({
                        value: heads[i],
                        key: i
                    })
                }
                if(this.headers.length == 0){
                    this.headers.push({
                        value: "请求没带Headers",
                        key: Date.now()
                    })
                }

            }

        },


        watch: {
            rowid(val) {
                this.getReport();
            },
        },
    }
</script>
<style lang="less" scoped>
    .report {
        background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255);
        font-family: "幼圆"; 
        line-height: 28px;
        p {
            font-size: 18px; 
            font-weight: bold;
        }

        span {
            padding-right: 40px;
        }
    }
</style>